<template></template>

<script setup>
import { inject, onMounted } from 'vue'
import { Logo, Zoom, Fullscreen, MouseLocation, MapTheme } from '@antv/l7'

onMounted(() => {
  // 通过inject注入scene, 并解构
  const { scene } = inject('$scene_map')

  // 注册控件
  const logo = new Logo({
    img: 'https://img.gejiba.com/images/dfdb6db1623eb881e724f58d9a366af8.png',
    href: 'http://www.x-zd.com',
  })
  scene.addControl(logo)

  // 鼠标位置控件
  const mouseLocation = new MouseLocation({
    transform: (position) => position,
    position: 'bottomright',
  })
  scene.addControl(mouseLocation)

  // 添加放大缩小控件
  const zoom = new Zoom({
    zoomInTitle: '放大',
    zoomOutTitle: '缩小',
    position: 'bottomright',
  })
  scene.addControl(zoom)

  // 添加全屏控件
  const fullscreen = new Fullscreen({
    btnText: '全屏',
    exitBtnText: '退出全屏',
  })
  scene.addControl(fullscreen)

  // 主题切控件
  const mapTheme = new MapTheme()
  scene.addControl(mapTheme)
})
</script>
